<template>
  <div>
    <img src="../../assets/logo.jpg" width="150" height="150" style="margin-top:50px;" />
    <div class="login-title">欢迎使用BlueBike</div>

    <mt-field class="login-input" label type="text" placeholder="账号" v-model="loginCode"></mt-field>
    <mt-field class="login-input" label type="password" placeholder="密码" v-model="password"></mt-field>
    <mt-button class="login-btn" style="margin-right:20px;" type="primary" @click.native="gotoRegister" >注册</mt-button>
    <mt-button class="login-btn" type="primary" @click.native="loginClick(loginCode,password)">登录</mt-button>
    <div class="login-text" @click="poppwd()">忘记密码</div>
    <!-- <div class="login-text" @click="popkf()">联系客服</div> -->
    <div class="login-text" @click="popabout()">关于我们</div>

    <!-- 忘记密码弹窗 -->
    <mt-popup v-model="poppwdvalue" position="right">
      <div class="pop">
        <div class="pop-text">
          请联系客服重置您的密码
          <br />客服电话：13143101301
          <br />客服QQ：963908484
          <br />
        </div>
        <mt-button type="primary" size="small" @click.native="poppwd()" style="margin-top:20px;">关闭</mt-button>
      </div>
    </mt-popup>

    <!-- 联系客服弹窗 -->
    <mt-popup v-model="popkfvalue" position="right">
      <div class="pop">
        <div class="pop-text">
          客服电话：13143101301
          <br />客服QQ：963908484
          <br />
        </div>
        <mt-button type="primary" size="small" @click.native="popkf()" style="margin-top:20px;">关闭</mt-button>
      </div>
    </mt-popup>

    <!-- 关于我们 -->
    <mt-popup v-model="popaboutvalue" position="right">
      <div class="pop">
        <div class="pop-text">
          本该程序为BlueBike单车
          <br />编写人员为谢宇燊
          <br />只做毕业设计演示用途
          <br />如果需商业用途
          <br />请联系电话13143101301
          <br />客服QQ：963908484
          <br />
        </div>
        <mt-button
          type="primary"
          size="small"
          @click.native="popabout()"
          style="margin-top:20px;"
        >关闭</mt-button>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { login } from "../../api/user";
export default {
  data() {
    return {
      loginCode: "",
      password: "",
      poppwdvalue: false,
      popkfvalue: false,
      popaboutvalue: false
    };
  },
  methods: {
    loginClick(loginCode, password) {
      if (loginCode == "" || password == "") {
        Toast({
          message: "登录账号和密码不能为空",
          position: "middle",
          duration: 500
        });
      } else if (loginCode != "" && password != "") {
        console.log("开始登录");
        this.dologin(loginCode, password);
      }
    },
    //写一个登录的函数
    dologin(loginCode, password) {
      console.log("调用登录函数");
      login(loginCode, password).then(res => {
        console.log("接收");
        console.log(res);
        if (res.code == 1) {
          Toast({
            message: "登录成功",
            position: "middle",
            duration: 1000
          });
          this.$store.commit('user/LOGIN',res);
          this.$store.commit('user/SetUserData',res.data);
          console.log("vuexOK!");
          this.$router.push({path:'/'});
        }
        else if(res.code == 20002){
          Toast({
            message: "账号不存在或密码错误",
            position: "middle",
            duration: 1000
          });
        }
      }).catch(err =>{
        console.log(err);
        if(err.code == 20002){
          Toast({
            message: "账号不存在或密码错误",
            position: "middle",
            duration: 1000
          });
        }

      } );
    },
    // 写一个页面跳转到注册
    gotoRegister(){
      this.$router.push({path:'/register'});
    },

    poppwd() {
      this.poppwdvalue = !this.poppwdvalue;
    },
    popkf() {
      this.popkfvalue = !this.popkfvalue;
    },
    popabout() {
      this.popaboutvalue = !this.popaboutvalue;
    }
  }
};
</script>
<style  scoped>
.login-title {
  color: #26a2ff;
  font-size: 60px;
  margin-top: 0px;
  margin-bottom: 50px;
  text-align: center;
}
.login-input {
  width: 80%;
  margin-left: 10%;
  touch-action: none;
}
.login-btn {
  width: 30%;
  margin-top: 100px;
}
.login-text {
  color: #0b8ff5;
  margin-top: 60px;
  font-size: 30px;
  text-align: center;
  /* width: 50%; */
}
.pop {
  background-color: white;
  padding: 30px;
  /* height: 100%; */
  width: 100vw;
  /* font-size: 50px; */
}
.pop-text {
  font-size: 50px;
}
</style>
